New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Mobile optimizations #26
Comments
Why "skip to TOC"? I would rather hide the TOC completely in a mobile view!? Or if we keep it, you wouldn't need to jump there, because it would be closed by default anyway. (And we currently don't have any generic anchors inside What about title, tagline and breadcrumbs? I think title and tagline should definitely be at the top. (I guess you just left it out by accident or to make it easier to get the general idea across.) But I'm not sure about the breadcrumbs. As they usually enhance usability, they should probably stay in as well. |
The title and tagline do not add valuable information. The title is already in the title tag. So they should not be in the mobile view. The functionality of going back to the start page is already behind the logo (which should be smaller than in the normal view of course). You're right, we have no way to diferenciate between content and TOC currently, unless we use The TOC would not be closed by default if you don't have JavaScript. If you have JavaScript, the skip links are hidden completely because TOC and Sidebar can be collapsed (and are by default). The TOC is important in a mobile view because scrolling long pages on mobile is a pain. So the TOC provides the simplest way to navigate to the topic you're looking for. I would drop breadcrumbs just to save space. Or move them to the very bottom. One important thing that's missing from scribbles is search. It should probably go above the action bar. |
Okay, good points regarding the importance of the TOC. |
Ah, good point |
As you can see, I have just added my first try. I am already quite happy with it, but some things still need to follow. Although, I think it can go live like this. Three things which could probably be done before Monday (but I won't do it until then, maybe @splitbrain?):
But I will make some changes to the core to improve the action dropdown this evening (mainly adding missing actions and language strings). Another thing which needs to be done: Testing! So far, I have only tested in a resized desktop browser... :-/ |
Just saw that |
I've just tested my site on my Android phone (Android 2.3.7, default browser, 320x480px screen). In my opinion the font of the navigation elements (e.g. in the toc) and especially the jump to content link should be larger. Maybe we should also add some JavaScript to the jump to content link as now when you clicked on it once it doesn't work anymore as long as you are on the same page (as then you are already on the exactly same URL). Back to top links would be great of course. Furthermore the jump to content link worked at least on my phone only after the page was fully loaded, maybe a JavaScript-based solution could work earlier? Wikipedia has a nice feature in their mobile version that all sections of the content are collapsed and you need to click on the header in order to expand it. That way you also don't need any toc. I think it might be worth a consideration to add that feature. I think hiding the sidebar by default, too, would make sense, maybe the state of the sidebar could be remembered in the settings cookie. |
Some further notes:
There are also some minor size issues of the various input elements (e.g. checkboxes have too much space around them), I don't know if that can be fixed. When you zoom in (which is needed in my opinion) the search form and the tools dropdown overlap. When you zoom in, the save/preview/cancel buttons don't fit into one line anymore and then the cancel button is directly below the save button without any spacing between them, I think this is also bad. The buttons should be larger and have some spacing around them. The main textarea behaves a bit strange, too, sometimes I have the feeling it expands to the full height, then again it is small which means that sometimes the toolbar can be accessed, sometimes it can't. |
I like the idea of collapsing sections and not using a TOC at all. Something like the following (needs selector adjustments) would work:
|
@michitux this first step of mobile optimization will focus on consuming/browsing only, not editing. @selfthinker I think we should split up this ticket into its own milestone with separate tickets. |
@michitux, As @splitbrain already pointed out, we were not even trying to make any mobile improvements for anything other than browsing pages. I did optimise at least the login/register and config admin a little bit. But for something like the media manager you'd need to spend a lot more time! @splitbrain, |
I just pushed some more changes to support smaller screens in two different stages: first up to 768px (just make the page full width and put the sidebar on top) and then up to 480px (which includes the changes already done before, i.e. also changing the header and removing the pagetools etc). I'd also like to adjust the |
We already talked about it but hadn't a ticket for it.
I just scribbled down a few ideas for the general layout:
Aks questions if something is not clear.
We might also have look at what wikipedia does in their mobile view.
The text was updated successfully, but these errors were encountered: